<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>住户管理</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../plugins/layui/layui.js"></script>
    <script src="../js/bootstrap.min.js"></script>

</head>
<body>
<h1>住户管理</h1>

<div class="container-fluid">
    <!--    表格-->
    <table id="demo" lay-filter="household"></table>
</div>

<div>
    <!-- 修改模态框（Modal） -->
    <div class="modal fade" id="addmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog " style="width: 700px" >
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel" align="left">
                        住户添加
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                    </button>
                </div>

                <div class="modal-body">
                    <div class="container">

                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">短输入框</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" lay-verify="required" placeholder="请输入"
                                       autocomplete="off" class="layui-input">
                            </div>
<!--                        </div>-->
<!--                        <div class="layui-form-item">-->
                            <div class="layui-inline">
                                <label class="layui-form-label">日期选择</label>
                                <div class="layui-input-block">
                                    <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">日期选择</label>
                                <div class="layui-input-block">
                                    <input type="text" name="date" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">行内表单</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="number" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">日期选择</label>
                                <div class="layui-input-block">
                                    <input type="text" name="date" id="" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">行内表单</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="number" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                关闭
                            </button>
                            <button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
                        </div>
                    </form>
                </div>

                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>

<!--表格头工具栏-->
<script type="text/html" id="toolbarDemo">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">住户姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="hname" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">住户电话号</label>
                <div class="layui-input-inline">
                    <input type="text" name="htel" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <input type="submit" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="demo" value="综合查询">
                <input class="layui-btn layui-btn-sm" lay-event="add" value="添加" type="button">
            </div>
        </div>
    </form>
</script>


<!--表格内工具栏-->
<script type="text/html" id="toolEventDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="change">迁出</a>
</script>
<script>

    layui.use(['table','form'], function () {
        var table = layui.table
        form = layui.form;

        let tabledata = []
        //获取表格数据
        $.ajax({
            url: "gethouseholds",
            dataType: "json",
            success: function (data) {
                tabledata = data
            }
        })

        //加载表格
        setTimeout(function loadTable() {

            table.render({
                elem: '#demo'
                , id : 'household'
                , height: 600
                , toolbar: '#toolbarDemo'
                , page: true //开启分页
                , cols: [[ //表头
                    {field: 'aid', title: '住户编号', sort: true, fixed: 'left'}
                    , {field: 'htel', title: '手机号'}
                    , {field: 'hname', title: '住户姓名'}
                    , {field: 'vid', title: '住所属小区'}
                    , {field: 'tid', title: '楼宇'}
                    , {field: 'tnumber', title: '单元'}
                    , {field: 'hsm', title: '状态'}
                    , {field: 'hopenid', title: '微信号'}
                    , {field: 'num', title: '登陆账号'}
                    , {field: 'pass', title: '登陆密码'}
                    , {title: '操作', templet: '#toolEventDemo'}
                ]]
                , data: tabledata
            });


        }, 500)
        //-----加载表格


        //单元格工具事件
        table.on('tool(household)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'change') { //编辑
                layer.confirm('确定迁出吗？', function (index) {
                    layer.close(index);

                    // 向服务端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载

                    table.reloadData(aid, {
                        scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                    });

                });
            } else if (layEvent === 'edit') { //编辑
                $('#addmodal').modal('show')

            }
        });

        //  头工具栏事件
        table.on('toolbar(household)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'sel':
                    layer.msg('查询');
                    //do sel
                    break;
                case 'add':
                    layer.msg('添加');
                    //TODO ADD
                    break;
            }

        });
        //表单提交
        form.on('submit(demo)', function(data){
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var newdata = data.field
            console.log(JSON.stringify(newdata))
            $.ajax({
                url:"selhousehold",
                type:"POST",
                contentType: 'application/json;charset=utf-8',
                data:JSON.stringify(newdata),
                success:function(resp){
                    table.reloadData('household',{

                        data:resp
                    },true);
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });

</script>
</body>
</html>